/**
* @package		iWet		Dynamic creation of wet floor effect, preserving the original image and using png mask for soft borders and perspective effect.
*							Supports all A-grade browsers(Including IE5.5+).
* @version		0.1
* @example		1			Add <script type="text/javascript" src="iWet.js"></script> to the head of your page
*				2			Just add class 'iWet' to target images in html, like: <img src="imagename.jpg" class="iWet" width="200" height="200" alt="" />
*				3			Modify/redraw mask.png if you need different reflection properties or image dimentions
*				4			???
*				5			PROFIT!
*
* @author 		Goreanski Michael(Umkus) - goreanski@gmail.com
* @copyright	you haz it	(Licenced under BSD License)
*
*
* Known issues:	1			FF(Win) throws exception when hard-refreshing page with Ctrl+F5
*				2			Reflection's position doesn't update when resizing window
*				3			IE6 has minor troubles placing reflections correctly whithin elements if their width/height set in percents
*				4			Fixed image's size support only
*/

/**
* Handles onLoad state
* @param	string		func	Function to load when ready
* @return	boolean
*/
function loadEvent(func)
{
	if (window.addEventListener)
	{
		window.addEventListener('load', func, false);
	}
	else
	{
		window.attachEvent('onload', func);
	}

	return true;
}

loadEvent(makeWet);

/**
* Finds current coordinates of the element
* @param	object		obj		Object element to get offsets
* @return	array				left and top offsets
*/
function findPos(obj)
{
	var curleft = curtop = 0;
	if (obj.offsetParent)
	{
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent)
		{
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

/**
* Finds all images marked with 'iWet' class
* @return	array				Array of image elements
*/
function getWetImages()
{
	//All document images
	var imgs = document.getElementsByTagName('img');

	var found = [];

	for(i in imgs)
	{
		if(typeof(imgs[i]) == 'object')
		{
			if (imgs[i].className.indexOf('iWet') > -1)
			{
				found.push(imgs[i]);
			}
		}
	}

	return found;
}

/**
* Main funtion. Iterates through images and makes things happen
* @return	boolean
*/
function makeWet()
{
	//Images to handle
	var imgs = getWetImages();

	var mask = 'mask';
	var width = 200;
	var height = 200;

	for(i in imgs)
	{
		var img = imgs[i];
		var src = img.src;

		var pos = findPos(img);

		var left = pos[0];
		var top = pos[1];

		img.style.top = top + 'px';
		img.style.left = left + 'px';

		var div = document.createElement('div');

		div.style.width = width + 'px';
		div.style.height = height * 2 + 'px';
		div.style.position = 'absolute';
		div.style.top = top+'px';
		div.style.left = left + 'px';
		div.style.background = "url('" + mask + ".png')";

		//IE can't hadle canvas. But [effectz. he haz it.]
		if (navigator.appVersion.indexOf("MSIE") != -1)
		{
			var reflection = document.createElement('div');
			reflection.style.width = width + 'px';
			reflection.style.height = height + 'px';
			reflection.style.position = 'absolute';
			reflection.style.top = (top + height) + 'px';
			reflection.style.left = left + 'px';
			reflection.style.background = "url('"+src+"') no-repeat";
			//Make background with filter
			reflection.style.filter = "flipv";

			//Fix IE6 png for newly created div
			div.style.behavior = 'url(iepngfix.htc)';
		}
		//Normal browser
		else
		{
			//Make background with canvas
			var newImg = new Image();
			newImg.src = src;
			newImg.src = newImg.src;

			newImg.width = width;
			newImg.height = height;

			var reflection = document.createElement('canvas');
			reflection.width = width;
			reflection.height = height;
			reflection.style.position = 'absolute';
			reflection.style.top = (top + height) + 'px';
			reflection.style.left = left + 'px';

			var ctx = reflection.getContext("2d");

			//Flip image
			ctx.translate(0, reflection.height);
			ctx.scale(1, -1);

			ctx.drawImage(newImg, 0, 0,width,height);
		}

		div.style.zIndex = 1;

		reflection.style.zIndex = 0;
		reflection.style.visibility = 'hidden';

		//First the reflection
		img.parentNode.appendChild(reflection);

		//Then the mask
		img.parentNode.appendChild(div);

		reflection.style.visibility = 'visible';

		img.style.visibility = 'visible';

	}

	return true;
}
/*^_^*/